<template>
    <div class="recharge box-border">
        <assets-head :title="$t('充值通道')">
            <img src="../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
                @click="goRouter('/assetsCenter/rechargeWithdrawRecord?back=1')" />
        </assets-head>
        <div class="pl-36 pr-36">
            <div class="recharge-title font-35 textColor">{{ $t('请选择充值币种') }}</div>
            <div class="recharge-list flex justify-between">
                <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
                    @click="selectSymbol('usdt')">
                    <img src="../../assets/image/symbol/usdt.png" class="w-92 h-92" />
                    <div class="text-grey font-26 mt-32">{{ $t('USDT充值') }}</div>
                </div>
                <div class="item-view  flex flex-col items-center justify-center text-center w-189 h-220 box-border"
                    @click="selectSymbol('btc')">
                    <img src="../../assets/image/symbol/btc.png" class="w-92 h-92" />
                    <div class="text-grey font-26 mt-32">{{ $t('BTC充值') }}</div>
                </div>
                <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
                    @click="selectSymbol('eth')">
                    <img src="../../assets/image/symbol/eth.png" class="w-92 h-92" />
                    <div class="text-grey font-26 mt-32">{{ $t('ETH充值') }}</div>
                </div>
            </div>
        </div>
        <div class="textColor mt-40">
            <div class="pl-36 pr-36 h-90 lh-90 border-b-color flex justify-between" v-for="(item,index) in list" :key="index"  @click="toPath(item.url)">
                <div class="flex items-center">
                    <img :src="item.imgPath" class="w-44 h-44 rounded-full mr-20" />
                    <span class="textColor1">{{ item.name }} {{$t('官方充值通道')}}</span>
                </div>
                <div>
                    <van-icon class="textColor1" name="arrow" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { Icon } from 'vant';
export default {
    name: 'rechageList',
    components: {
        assetsHead,
        [Icon.name]: Icon,
    },
    data() {
        return {
            list:[
                {
                    name: 'Huobi',
                    url:'https://www.huobi.com/en-us/',
                    imgPath:require('../../assets/image/huobi.png')
                },
                {
                    name: 'Binance',
                    url: 'https://www.binance.com/en',
                    imgPath: require('../../assets/image/bian.png')
                },
                {
                    name: 'Coinbase',
                    url: 'https://www.coinbase.com/',
                    imgPath: require('../../assets/image/coinbase.png')
                },
                {
                    name: 'Crypto',
                    url: 'https://www.crypto.com/',
                    imgPath: require('../../assets/image/crypto.png')
                }    
            ]
        }
    },
    created() {

    },
    methods: {
        toPath(url){
             const a = document.createElement('a');
            a.href = url;
            a.target = "_bank";
            document.body.append(a);
            a.click();
            document.body.removeChild(a)
            // if (navigator.userAgent.search('Html5Plus') != -1) {
            //     plus.runtime.openURL(url)
            // } else {
            //     window.open(url)
            // }
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        selectSymbol(symbol) {
            this.$router.push({
                path: "/recharge/rechargePage",
                query: {
                    'symbol': symbol
                }
            });
        },
        goRouter(params) {
            this.$router.push({
                path: params
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.recharge {
    width: 100%;
    box-sizing: border-box;
}

.recharge-title {
    margin: 86px 0 104px 0;
}

.recharge-list>div {
    border: 2px solid $bg_dark;
    border-radius: 15px;
    box-sizing: border-box;
}
</style>
